<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=vi-vn"></script>
<script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var australia = new google.maps.LatLng(<?=$lat;?>,<?=$lng;?>);
function initialize(txtsearch) {
  var mapOptions = {
    zoom: 7,
	lang:'vi-vn',
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  calcRoute(txtsearch);
}
function calcRoute(txtsearch) {
  if(txtsearch== '[object Event]'){
	  txtsearch = '<?=$to;?>, Viêt Nam';
  }
  var request = { 
    origin: txtsearch,
    destination: '<?=$to;?>, Viêt Nam',
    //waypoints:[{location: '<?=$to;?>, Viêt Nam'}],
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.0;
  document.getElementById('total').innerHTML = total + ' km';
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script type="text/javascript">
		$(function(){
			$("#icontype").hide();
			if($(".txtsearch").val() !='' && $(".txtsearch").val() !='Bạn đi từ đâu...'){
				$("#icontype").show();	
			}
			$("#btnsearchs").click(function(){
				var txtsearch = $(".txtsearch").val();
				if(txtsearch == 'Bạn đi từ đâu...'){
					txts = '';	
				}
				else{
					txts = txtsearch+', Viêt Nam';	
				}
				initialize(txtsearch);	
			});
			$(".txtsearch").keyup(function() {
                 $("#icontype").show();	
            });
			$("#icontype").click(function(){
				 $(".txtsearch").val('Bạn đi từ đâu...');
			});
		});
	</script>
    <div class="wp100 fleft" style="margin-bottom:60px;">
        <div class="header fleft">
        		<div class="wp100 h60 tleft">
                    <div class="logo fleft w145 mtop13" style="padding-left:20px;">
                        <div style="color:#ebeff0; font-size:26px;"><a href="<?=base_url()?>home.html">KunKun</a></div>
                    </div>
                    <div class="search fleft w600">
                        <div class="fleft mtop14 w350">
                              <div class="fleft">	
                                 <input class="txtsearch" maxlength="200" placeholder="Bạn đi từ đâu..." value="Bạn đi từ đâu..." onfocus="if(this.value =='Bạn đi từ đâu...' ) this.value=''" onblur="if(this.value=='') this.value='Bạn đi từ đâu...'" /> 
                              </div>
                              <div  class="fleft icontype"><div id="icontype" style="float:left; margin-top:-3px; font-size:14px; color:#666; cursor:pointer;">x</div></div> 
                        </div>
                        <div id="btnsearchs" class="fleft mtop14 btnsearch">Tìm kiếm</div>
                        <div class="fleft mtop3 w600">
                             <!--<div class="fleft mleft20" style="color:#046c97;">Tất cả địa điểm</div>
                             <div class="fleft mleft10">|</div>
                             <div class="fleft mleft10" style="color:#046c97;">Hồ Chí Minh</div>-->
                        </div>
                    </div>
                    <div class="login fright mtop12 mright15">
                        <div class="fright mtop7 mleft3"><a class="login" href="dangky.html">Đăng ký</a></div>
                        <div class="fright mleft20"><img src="<?=url_tmpl()?>img/dangky.png" width="30" height="30" /></div>
                        <div class="fright mtop7"><a class="login" href="login.html">Đăng nhập</a></div>
                        <div class="fright mleft5"><img src="<?=url_tmpl()?>img/dangnhap.png" width="30" height="30" /></div>
                        <div class="clear"></div>
                    </div>
                </div>
        </div>
    </div>	
    <div id="map-canvas" style="float:left;width:70%; height:88%"></div>
    <div id="directionsPanel" style="float:right;width:30%;height:88%; overflow:auto;">
    <p id="map_total" style="margin-top:10px; padding-left:10px;">
    	Tổng: <span id="total"></span>
    </p>
    </div>
